/* devui css override */
body{
  // d-layout
  div.devui-layout__header {
    flex: none;
  }

  div.devui-layout__content {
    flex: 1;
    min-height: auto;
    min-width: 0;
  }

  ul.devui-menu-vertical {
    .devui-menu-item {
      background: transparent;
      align-items: center;
    }

    .devui-menu-item-select {
      background: var(--devui-list-item-active-bg) !important;
      border-radius: var(--border-radius);

      &:after {
        display: none;
      }
    }
  }

  .devui-input-slot__suffix > span {
    color: var(--devui-placeholder);
  }

  div.devui-tooltip {
    z-index: var(--devui-z-index-pop-up, 1060);
    background-color: var(--devui-feedback-overlay-bg, #464d6e);
    border-radius: var(--devui-border-radius-feedback, 4px);
  }

  /* 隐藏必选符号 */
  // .devui-form__label--required:before {
  //   display: none;
  //   content: '';
  // }

  // d-skeleton-item
  .devui-skeleton-item {
    &.devui-skeleton-item--square {
      border-radius: var(--border-radius);
    }
  }

  // d-tree
  .devui-tree {

    &__node,
    &__node-title {
      color: var(--color-font) !important;
    }
  }

  // d-editor
  .devui-code-editor {
    .monaco-editor {
      .line-numbers {
        color: var(--color-lighter);
      }
    }
  }

  .devui-splitter {
    &__collapse {
      background-color: var(--color-lighter) !important;
    }
  }

  // tab
  .devui-menu-horizontal {
    .devui-menu-item {
      span {
        font-weight: 400;
        color: var(--color-light);
      }
    }

    .devui-menu-item-select,
    .devui-menu-active-parent,
    .devui-menu-overflow-container:hover,
    .devui-menu-item:hover {
      span {
        color: var(--color-light);
      }

      &:after {
        background-color: var(--color-font) !important;
      }
    }
  }

  .devui-icon--operable.devui-icon__container {
    display: inline-flex;
    align-items: center;
  }

  .devui-menu-vertical {
    .devui-menu-item:hover {
      background-color: $devui-list-item-hover-bg;
      border-radius: var(--border-radius);
    }
  }

  // input输入框icon
  .devui-input {
    &__container {
      i.icon {
        &:before {
          color: var(--color-CG500);
        }
      }
    }
  }

  // date-range组件
  .devui-range-date-picker-pro {
    .devui-range-date-picker-pro__range-picker-icon {
      svg {
        width: 14px;
        height: 14px;
      }
    }
  }

  .devui-progress__content .devui-progress__line {
    background: var(--color-CG300, #e4e9f0);
  }

  // radio button
  .devui-radio-button {
    &.active {
      background-color: var(--color-primary) !important;
      border-color: var(--color-primary) !important;
      color: white;
    }
  }

  // button
  button.devui-button--solid--primary {
    background-color: var(--devui-primary, #5e7ce0);
    border: none;
  }

  button.devui-button--solid--danger {
    background-color: var(--devui-contrast, #c7000b);
    border: none;
  }

  button.devui-button--outline {
    background-color: #fff;
  }
  // danger按钮hover 禁用样式补充
  button.devui-button--outline--danger {
    &:hover{
      background-color: var(--devui-danger-bg,#F9DADF);
      border-color: var(--devui-danger, #DA203E);
    }
    &[disabled]{
      border-color: var(--devui-danger-bg,#F9DADF);
      color: var(--devui-danger-bg,#F9DADF);
      &:hover{
        background-color: var(--devui-btn-common-bg, #FFFFFF);
      }
    }
  }
  // 次要按钮样式
  button.devui-button--solid--secondary {
    border: var(--devui-btn-common-border-color) solid 1px;

    &:hover,
    &:active,
    &:focus {
      border: var(--devui-btn-common-border-color) solid 1px;
      color: var(--devui-text);
      background: linear-gradient(0deg, rgba(188, 188, 208, 0.1) 0%, rgba(188, 188, 208, 0.1) 100%), var(--White, #FFF);
    }
  }

  // d-avatar
  .devui-avatar {
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    margin-bottom: auto;

    img {
      background-color: white;
    }

    &.devui-avatar-square {

      img,
      .devui-avatar--style {
        border-radius: var(--border-radius) !important;
      }

      &.radius-big {

        img,
        .devui-avatar--style {
          border-radius: 8px !important;
        }
      }
    }
  }

  .devui-result {
    &__title {
      color: var(--color-light);
    }

    &__desc {
      color: var(--color-light);
    }

    &__extra {
      color: var(--color-lighter);
    }
  }

  .devui-tree {
    &__node {
      &-content {
        &--value-wrapper {
          div {
            white-space: nowrap;
            word-break: keep-all;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }

  .devui-tabs__nav--slider>li.active {
    text-shadow: none;
  }

  .devui-table {
    &.out-border {
      box-sizing: content-box;
      border: 1px solid var(--color-border-light);
      border-radius: var(--border-radius);
      .devui-table__thead {
        tr {
          th {
            background-color: $table-head-bg;
          }
        }
      }
    }
    .devui-table__tbody tr.hover-enabled:hover {
      background-color: var(--devui-global-bg);
    }
    .devui-table__tbody tr.hover-enabled:hover .devui-table--first-sticky-right {
      background: var(--devui-global-bg);
    }
    // 表格表头背景色
    .devui-table--header-bg thead.devui-table__thead tr {
      background: var(--table-header-bg);
    }
    &__tbody {
      tr {
        td {
          border-bottom: 1px solid var(--color-border-light);
        }

        &:first-of-type {
          td {
            border-top: none;

            &:first-of-type {
              border-top-left-radius: var(--border-radius);
            }

            &:last-of-type {
              border-top-right-radius: var(--border-radius);
            }
          }
        }

        &:last-of-type {
          td {
            border-bottom: none;

            &:first-of-type {
              border-bottom-left-radius: var(--border-radius);
            }

            &:last-of-type {
              border-bottom-right-radius: var(--border-radius);
            }
          }
        }
      }
    }
  }

  .devui-breadcrumb {
    &__separator {
      margin: 0 2px;
    }
  }
  // .devui-input--error,.devui-select__selection--error,.devui-textarea--error {
  //   background-color: #fff;
  // }
  .devui-editable-select .devui-editable-select__inner {
    max-height: 300px;
  }

  .devui-link-hover {
    &:hover {
      color: var(--devui-link) !important;
    }
  }

  span.devui-form__label-span {
    // font-size: 16px;
    // line-height: 22px;
    font-weight: 400;
  }


  .devui-checkbox {
    padding: 3px 0;
  }

  .devui-radio__wrapper {
    padding: 3px 0;
  }
  // .devui-checkbox__label-text {
  //   font-size: 16px;
  // }
  // .devui-radio.devui-radio--md span .devui-radio__label {
  //   font-size: 16px;
  // }
  .devui-radio__wrapper label.devui-radio {
    display: flex;
    align-items: center;
  }
  .devui-checkbox span.devui-checkbox__material {
    border-color: var(--checkbox-border-color);
  }

  circle.devui-radio__material-outer {
    stroke: var(--checkbox-border-color);
  }

  div.devui-checkbox label {
    height: auto;
    white-space: normal;
  }

  div.devui-checkbox label>span.devui-checkbox__label-text{
    white-space: normal;
  }

  .dp-dropdown-menu-template { // 下拉中的不需要换行
    div.devui-checkbox label>span.devui-checkbox__label-text{
      white-space: nowrap;
    }
  }

  .devui-table--lg tbody>tr.devui-table__row>td {
    padding: 16px 20px;
  }
  // 下拉框添加padding
  .devui-select__dropdown .devui-select__dropdown-list {
    padding: 12px;
    .devui-select__item:not(:last-child) {
      margin-bottom: 4px;
    }
  }
  .devui-dropdown__menu-wrap {
    padding: 12px;
    max-height: 500px;
    overflow-y: auto;
    .devui-select__item + .devui-select__item {
      margin-top: 4px;
    }
  }
  .devui-dropdown__menu-wrap:has(.dp-dropdown-menu-template) {
    padding: 0;
  }
  button.devui-button--outline--secondary:hover,
  button.devui-button--outline--secondary:focus,
  button.devui-button--outline--secondary:active {
    border-color: var(--second-button-hover-border-color);
    background-color: var(--second-button-hover-bg-color);
    color: var(--devui-text);
  }

  // 弹框样式设置
  .devui-modal__header {
    padding: 20px;
    border-bottom: 1px solid var(--color-border);
    height: auto;
  }

  // icon样式
  .devui-icon__container {
    transition: transform var(--devui-animation-duration-slow, 0.3s)
    var(--devui-animation-ease-in-out-smooth, cubic-bezier(0.645, 0.045, 0.355, 1));
  }

  .devui-textarea__show-count, .devui-input-slot__suffix {
    color: var(--devui-placeholder);
  }

  .devui-radio.disabled span.devui-radio__material {
    background-color: var(--devui-btn-common-bg);
  }

  .input-num--suffix {
    color: var(--devui-placeholder);
  }


  // 空下拉样式
  .devui-flexible-overlay.blank_select .devui-select__dropdown{
    .devui-select__dropdown-list{
      display: none;
    }
  }

  // popover样式
  .devui-flexible-overlay.devui-popover__content.is-icon {
    max-width: 680px;
    white-space: pre-wrap;
    word-break: break-all;
    @media screen and (max-width: 768px){
      max-width: calc(100% - 32px);
    }
  }
  // 代码编辑器的placeholder颜色
  .dp-md-container .CodeMirror-empty pre.CodeMirror-placeholder.CodeMirror-line-like{
    color: var(--devui-placeholder);
  }
}